import { StatusBar } from 'expo-status-bar';
import { useState, useEffect } from 'react';
import { ToastAndroid, BackHandler, Alert, FlatList, StyleSheet,TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView } from 'react-native';
// dayjs

// const Btn = ({children, style, color})=>{
//     return (
//         <TouchableOpacity style={[
//             style,
//             {justifyContent: 'center',alignItems: 'center'}
//         ]}>
//             <Text style={{color: color?color:'#fff'}}>{children}</Text>
//         </TouchableOpacity>
//     )
// }
const Btn = ({children, style, color,...rest})=>{
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                ...style
            }
        }>
            <Text style={{color: color?color:'#fff'}}>{children}</Text>
        </TouchableOpacity>
    )
}

const tagsData = [
    {label: '综合新闻',id: ''}, 
    {label: '新闻2',id: '2'}, 
    {label: '新闻3',id: '3'}, 
    {label: '新闻4',id: '4'}, 
    {label: '新闻5',id: '5'}, 
];

const uri = 'https://facebook.github.io/react-native/img/tiny_logo.png'
const baseURL = 'http://8.142.171.141:8080/school-news';

let time = 0;
export default function App() {
    const [selectTab,setSelectTab] = useState("");
    const [page,setPage] = useState(1);
    const [list,setList] = useState([]);
    const [refreshing,setRefreshing] = useState(false);
    useEffect(()=>{
        BackHandler.addEventListener(
            "hardwareBackPress",
            ()=>{
                if(Date.now()-time>2000){
                    time = Date.now();
                    ToastAndroid.show(
                        '确定要退出？',
                        ToastAndroid.SHORT
                    )
                    return true
                }else{
                    BackHandler.exitApp();
                }
            }
        )
    },[])
    useEffect(()=>{
        fetch(`${baseURL}/draft/pageList?page=${page}&size=40`)
            .then(res=>res.json())
            .then(res=>{
                console.log(res.data.content)
                if(page==1){
                    setList(res.data.content)
                }else{
                    setList([...list,...res.data.content])
                }
            })
    },[page])
    const onEnd = ()=>{
        setPage(page+1)
    }
    const onRefresh = ()=>{
        setRefreshing(true);
        setPage(1);
        fetch(`${baseURL}/draft/pageList?page=${page}&size=40`)
            .then(res=>res.json())
            .then(res=>{
                setRefreshing(false)
                setList(res.data.content)
            })
    }
    return (
        <View style={styles.container}>
            {/* <ScrollView> */}
                <Btn
                    onPress={()=>{
                        Alert.alert('hello')
                    }}
                    style={{
                        width: 200,
                        height: 50,
                        backgroundColor: '#aaa'
                    }}
                    color='#f00'
                >按钮</Btn>
                <View style={styles.tabBtn}>
                    {
                        tagsData.map(item=>(
                            <Btn 
                                onPress={()=>setSelectTab(item.id)}
                                key={item.id}
                                style={{
                                    width: '18%',
                                    height: 30,
                                    backgroundColor: selectTab==item.id?"#f00":'#aaa'
                                }}
                                // color={selectTab==item.id?"":""}
                            >
                                {item.label}
                            </Btn>
                        ))
                    }
                </View>
                <FlatList
                    onRefresh={onRefresh}
                    refreshing={refreshing}
                    data={list}
                    renderItem={({item}) => <Text>{item.draftTitle}</Text>}
                    onEndReached={onEnd}
                    keyExtractor={item=>item.id}
                />
                
            {/* </ScrollView> */}
            <StatusBar style="auto" />
        </View>
    );
}

const styles = StyleSheet.create({
    tabBtn: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginVertical: 20
    },
    container: {
        flex: 1,
        paddingTop: 30,
        backgroundColor: '#ccc'
    }
});
